
import React from 'react';
import { Modal, Icon, message } from 'antd';
import { renderTaskItem } from '../common/commonRender';
import TitleItem from '../../components/TitleItem';
import { TaskDetailContent } from '../task/taskDetail'
// import taskServer from '../../services/task';
// import isSuccess from '../../utils/error';
import s from './index.module.less';

const confirm = Modal.confirm;

class ProjectTask extends React.Component {

    state = {
        loading: false,
        showModal: false,
        tasks: [],
    }

    componentWillMount() {
        this.handelSetValue(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.handelSetValue(nextProps);
    }

    handelSetValue = (props) => {
        const { data = {} } = props;
        const tasks = data.tasks || [];
        this.setBaseValue({ tasks });
    }

    setBaseValue = ({ tasks }) => {
        this.setState({ tasks });
    }

    openModal = () => {
        if (this.props.create) {
            message.warn('请在保存项目后创建任务');
            return;
        }
        // 打开创建任务的modal
        const { commonState: { onCreateTaskModalChange }, projectState, data } = this.props;
        onCreateTaskModalChange({
            taskModal: true,
            baseData: {
                projectid: projectState.detailData.projectid,
                projectname: projectState.detailData.name,
                stageid: data.stageid,
                stagename: data.name,
            }
        });
    }

    goPage = async (v) => {
        // 方案一: 跳转页面
        // const { ipcRenderer } = window.electron;
        // ipcRenderer.send('set-goPage', { index: 2, data: v });
        // 方案二: 弹窗显示任务信息
        // const res = await taskServer.detail({ taskid: v.taskid });
        // if(isSuccess(res)) {
        //     this.detailData = res.data;
        //     this.setState({ currentStage: res.data, show: true });
        // }
        // 方案三: 右侧边栏显示
        const { commonState, projectState, goPage } = this.props;
        if (goPage) { // 在侧边栏
            goPage(v);
            return;
        }
        commonState.setStateValue('sideOpen', true);
        projectState.taskState.getDetailForSide({ taskid: v.taskid });
    }

    onRightClick = (isFinish, recid, data) => {
        const { complete, restart } = this.props.projectState.taskState;
        const { taskid } = data;
        confirm({
            title: isFinish ? '是否将任务设为未完成？' : '是否将任务设为已完成？',
            content: '',
            okText: "确定",
            cancelText: "取消",
            onOk: () => {
                isFinish ? restart({ taskid }, this.onRightClickCallback) : complete({ taskid }, this.onRightClickCallback)
            },
        });
    }

    onRightClickCallback = () => {
        // 刷新详情信息
        const { projectState } = this.props;
        projectState.getDetail({ projectid: projectState.detailData.projectid }, true);
    }

    render() {
        const { data, projectState, col = 2 } = this.props;
        const { tasks, show, currentStage } = this.state;
        const { repeatList, aheadList } = projectState.taskState;
        return (
            <div>
                <TitleItem
                    title={'任务'}
                    onClick={this.openModal}
                    icon={!data.iscomplete && <Icon type="plus" className="mainColor" />}
                />
                {
                    renderTaskItem({
                        currentStage: { tasks },
                        col,
                        onClick: this.goPage,
                        onRightClick: this.onRightClick
                    })
                }
                <Modal
                    title="任务信息"
                    width={700}
                    visible={show}
                    footer={null}
                    wrapClassName={s.projectTaskDetailModal}
                    onCancel={() => this.setState({ show: false })}
                >
                    <TaskDetailContent
                        detailData={currentStage}
                        repeatList={repeatList}
                        aheadList={aheadList}
                    />
                </Modal>
            </div>
        )
    }
}

export default ProjectTask